<template>
    <div>
        <lab_head />
        <lab_header />

        <div class="container layout layout-margin-top">

            <ol class="breadcrumb">
                <li><a >全部课程</a></li>

                <li class="active">
                    <a >

                    </a>
                </li>
            </ol>

            <div class="row">
                <div class="col-md-9 layout-body">

                    <div class="side-image side-image-mobile">
                        <img src="https://dn-simplecloud.shiyanlou.com/ncn1.jpg?imageView2/0/h/300">
                    </div>
                    <div class="content course-infobox">
                        <div class="clearfix course-infobox-header">
                            <h3 class="pull-left course-infobox-title">

                                <span>{{ particulars.title }}</span>

                            </h3>

                            <div class="pull-right course-infobox-follow">

                                <span class="course-infobox-followers"></span>
                                <span>{{ particulars.guanzhu }}人关注</span>

                                <i
                                  v-show="t"
                                  class="fa fa-star"
                                  @click="follow(0)"
                                ></i>
                                <i
                                  v-show="f"
                                  class="fa fa-star-o"
                                  @click="follow(1)"
                                ></i>

                            </div>
                        </div>
                        <div class="clearfix course-infobox-body">

                            <div class="course-infobox-progress">
                                <div style="margin:2px"> </div>
                                <span>{{ particulars.describe }}</span>
                            </div>

                            <!-- 进度条 -->
                            <div>
                              <Progress :percent="10" :stroke-width="20" text-inside />课程进度(1/10)
                            </div>

                            <div class="pull-right course-infobox-price">
                              <span><Button class="but" color="blue" @click="pay(particulars.id)">购买课程</Button></span>

                            </div>

                        </div>

                        <div class="clearfix course-infobox-footer">

                            <div class="pull-right course-infobox-learned">000 人学过</div>
                        </div>

                    </div>
                    <div class="content">
                        <div>
                            <Tabs :datas="types"></Tabs>
                        </div>
                        <div class="tab-content">
                            <!-- 实验列表 -->
                            <div>
                                <!-- 章节 -->
                                <div class="" v-for="(chapter,index) in chapter_list" :key="index">
                                    <h3 class="" @click="knobble_change(chapter.id)">

                                      第{{ chapter.order }}章:{{ chapter.title }}

                                    </h3>

                              </div>
                            </div>
                            <!-- 小结 -->
                            <div class="" v-for="(knobble,index) in knobble_list" :key="index">

                                      <h4>
                                        <a href="">
                                        第{{ knobble[2] }}小结  ：  {{ knobble[1] }}<br />
                                        </a>
                                      </h4>

                                    <!-- </button> -->
                            </div>
                            <!-- 实验评论 -->

                            <!-- 实验报告 -->

                            <!-- 实验问答 -->

                        </div>
                    </div>

                </div>

                <lab_sidebar :course_list='course_list' ></lab_sidebar>
            </div>
        </div>

        <lab_footer />

    </div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
import lab_sidebar from './common/lab_sidebar';
import publish from './common/publish';
import { get_chapter,get_knobble,payurl_post,attention_post,attention_get,get_course } from './axios_api/api';
import { config } from '../config';
// import { config, formatXml } from '../config.js';
export default {
    data() {
        return {
          // 课程id
          c_id:0,
          t: 1,
          f: 0,
          // 分类
          types: {
              list: '实验列表',
              comment: '实验评论',
              report: '实验报告',
              course: '实验问答',
          },
          course_list: [],
          particulars:{},
          chapter_list : [],
          knobble_list:[],
        }
    },

    mounted() {
      this.course_get();
      this.follow_status();
      this.get_details()
      // console.log(this.particulars)
    },

    computed: {

    },

    methods: {
      // 获取关注状态
      follow_status(){
        var params = {u_id:1,c_id:this.c_id}
        attention_get(params).then((resp)=>{
          // 用户已关注状态
          if (resp.status == 1){
            this.t = 1,
            this.f = 0

          }
          // 用户未关注状态
          else{
            this.t = 0,
            this.f = 1

          }
        })
      },
      // 关注
      follow(status) {
        console.log(status)
        var data = {status:status,u_id:1,c_id:this.c_id}
        // 请求
        attention_post(data).then((resp)=>{
          if (resp.code == 403){
            this.$Message(resp.msg)
          }
          if (resp.status == 1){
            this.t == 1;
            this.f == 0;
            console.log(resp);
          }else{
            this.t == 0;
            this.f == 1;
            console.log(resp);
          }
          this.follow_status();
          this.course_get();
        })

      },
      // 发送请求，获取跳转链接
      pay(c_id){
        console.log(c_id)
        payurl_post({c_id:c_id,user_id:9}).then((resp)=>{
          window.location = resp.data.pay_url;
        })
      },

      get_details(){
        // 发送请求(课程id)，获取章节参数
        var params = {c_id:this.c_id}
        get_chapter(params).then((resp)=>{

          this.chapter_list = resp.data;

        })

      },
      knobble_change(id){

        // 发送请求(章节id)，获取节点参数
        var params = {chapter_id:id}
        get_knobble(params).then((resp)=>{
          this.knobble_list = resp.data;
          console.log(this.c_id)
        })
      },
      course_get(){
        var c_id = this.$route.query.c_id
        this.c_id = c_id
        get_course({c_id:c_id}).then((resp)=>{
          this.particulars = resp.data[0];
        })
      }


    },

    components: {
        // comment,
        lab_head,
        lab_header,
        lab_footer,
        lab_sidebar,
        publish,
    }
}
</script>

<style>
/* .but{

} */
</style>
